<template>
  <div id="Home">
    <!-- 搜索 -->
    <van-search placeholder="请输入搜索关键词" shape="round" @click="goSearch()" />
    <!-- 侧边导航 -->
    <van-tree-select height="88vh" :items="TopCateGroy" :main-active-index.sync="activeIndex">
      <template #content>
        <ul>
          <li v-for="(item,i) in CateGroy" :key="i" @click="gocateGroy(item.id)">
            <img :src="item.icon" alt />
            <p v-html="item.name"></p>
          </li>
        </ul>
      </template>
    </van-tree-select>
    <!-- 底部导航 -->
    <tabbar />
  </div>
</template>

<script>
import tabbar from "@/components/Share/Tabbar";
export default {
  name: "",
  components: { tabbar },
  data() {
    return {
      TopCateGroy: [{ text: "全部分类", id: 0 }],
      activeIndex: 0,
      goodslist: []
    };
  },
  methods: {
    // 请求数据
    getGoodsList() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/category/all"
      }).then(res => {
        if (res.code == 0) {
          // console.log(res.data);
          res.data.forEach(item => {
            if (item.pid == 0) {
              this.TopCateGroy.push({ text: item.name, id: item.id });
            }
          });
          this.goodslist = res.data;
          // console.log(this.TopCateGroy);
        }
      });
    },
    //页面跳转
    goSearch() {
      this.$router.push("/cateGroy/search");
    },
    // 商品详情页
    gocateGroy(id) {
      this.$router.push("/cateGroy/scategroy/" + id);
    }
  },
  computed: {
    CateGroy() {
      let index = this.activeIndex;
      let arr = this.goodslist;

      // console.log(this.TopCateGroy[index].id)

      if (index == 0) {
        return arr;
      }

      return arr.filter(item => {
        return item.pid == this.TopCateGroy[index].id;
      });
      // console.log(arr);
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getGoodsList();
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
#Home {
  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      width: 1.5rem;
      box-sizing: border-box;
      padding: 0.05rem;
      p {
        width: 100%;
        text-align: center;
        height: 0.8rem;
        font-size: 0.2rem;
        line-height: 0.6rem;
      }
      img {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
}
</style>